<template>
  <div class="home">
     <div class="left">
        <div class="title">
            <div  class="titleItem active">发布公告</div>
        </div>
        <div class="content">
                <el-form :model="state.formObj"  :rules="state.rules" ref="ruleForm" label-width="100px" >
                      <el-form-item label="标题:" prop="title">
                        <el-input size="small"  placeholder="给标题起个名字" style="width: 468px;" v-model="state.formObj.title"></el-input>
                      </el-form-item>
                      <el-form-item label="内容:" prop="notice_detail">
                        <el-input  type="textarea" :rows="30" size="small" placeholder="请输入公告内容" style="width: 468px;" v-model="state.formObj.notice_detail"></el-input>
                      </el-form-item>
                      <el-form-item label="附件:" prop="about_file">
                        <upload-file ref="uploadFile"></upload-file>

                         <el-dialog v-model="state.dialogVisible">
                            <img width="100%" :src="state.dialogImageUrl" alt="">
                          </el-dialog>
                      </el-form-item>
                  <el-form-item label="指定部门权限:">
                    <span style="color: red">指定部门【所有人】可看，优先级1</span>
                    <div class="tree">
                      <el-tree
                        :data="state.department"
                        show-checkbox
                        node-key="id"
                        :default-expanded-keys="state.list_key"
                        :default-checked-keys="state.list_key"
                        ref="detree"
                        :collapse-tags="true"
                      >
                      </el-tree>
                    </div>
                  </el-form-item>

                  <el-form-item label="单独设定人员:">
                    <span style="color: red">指定人【勾选者可看】可看，优先级2</span>
                    <div class="tree">
                      <el-tree
                        :data="state.selectData"
                        show-checkbox
                        node-key="id"
                        :default-expanded-keys="state.defaultExpandedKeys"
                        :default-checked-keys="state.defaultExpandedKeys"
                        ref="tree"
                        :collapse-tags="true"
                      >
                      </el-tree>
                    </div>
                  </el-form-item>
                </el-form>
                <div style="margin-top: 90px;margin-bottom:20px;display: flex; justify-content: center;">
                   <el-button  size="small" style="margin-right: 24px;" type="primary" @click="submitForm">发布</el-button>
                   <el-button  size="small" @click="cancel">取消</el-button>
                </div>
        </div>
     </div>

  </div>
</template>
<script>
// vue3 弃用了beforeCreate created
import {getCurrentInstance,ref,reactive,onMounted,onUpdated,onUnmounted,} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import uploadFile from '@/components/uploadFile/uploadFile'

const state = reactive({
    headerObj:{
     token : window.localStorage.getItem('token')
    },
   selectData: {},
   defaultExpandedKeys: [],
   activeTab : 1,
   disabled: false,
   dialogVisible: false,
   dialogImageUrl: '',
   department: [],
   formObj : {
     title : '',
     notice_detail:'',
     about_file:'',
   },
   rules:{
         title: [
           { required: true, message: '请输入公告标题', trigger: 'blur' }
         ],
         notice_detail: [
           { required: true, message: '请输入公告内容', trigger: 'blur' }
         ],
   },
  list_key: []
 });

export default {
  name: 'TaskAnnounce',
  components: {uploadFile},
  // setup(props,ctx){
setup(props,{emit}){
    const {ctx,proxy} = getCurrentInstance();
    const cc = getCurrentInstance();
    const _this = cc.appContext.config.globalProperties
    const store = useStore()
    const router = useRouter();
    function cancel(){
        closeCurrentPage()
    };
    function submitForm(){
      proxy.$refs.ruleForm.validate((valid) => {
                if (valid) {
                  let rules = proxy.$refs.tree.getCheckedKeys();
                  let detree = proxy.$refs.detree.getCheckedKeys();
                  let data = '*'
                  let bmdata = ''
                  if(rules.length > 0) {
                      data = userArr(rules);
                  }
                  if(detree.length > 0){
                      bmdata = userArr(detree);
                      state.formObj.department = bmdata
                  }
                  state.formObj.user_arr = data
                  state.formObj.about_file = proxy.$refs.uploadFile.state.files
                  _this.$request({
                      url: "?s=Learn.Notice.PushNotice",
                      params: state.formObj,
                  }).then(res=>{
                    if(res.ret==200){
                      proxy.$message.success('发布公告成功！')
                      setTimeout(function () {
                          window.location.href = 'http://intr.huanxingbi.cn/knowledge-basic-list'
                      },1000)
                    }
                  })
                } else {
                  proxy.$message.error('请先填写表单信息！')
                  return false;
                }
              });
    };
    function onSuccess(response, file, fileList){
          state.formObj.about_file = ''
          fileList.forEach(item=>{
            state.formObj.about_file = state.formObj.about_file + item.response.data.attc_id + ','
          });
          state.formObj.about_file = state.formObj.about_file.substring(0,state.formObj.about_file.length-1)
          console.log(state.formObj.about_file);
    };
    function onRemove(file,fileList){
      console.log('文件删除');
      console.log(file);
      console.log(fileList);
      state.formObj.about_file = ''
      fileList.forEach(item=>{
        state.formObj.about_file = state.formObj.about_file + item.response.data.attc_id + ','
      });
      state.formObj.about_file = state.formObj.about_file.substring(0,state.formObj.about_file.length-1)
      console.log(state.formObj.about_file);
    };
    function closeCurrentPage(){
        let title = router.currentRoute.value.meta.title
        let index = store.state.contentTabs.findIndex((item)=>{
            console.log();
            return item.title==title
        })
        store.state.contentTabs.splice(index,1)
        router.go(-1)
    };
    const userArr = (data) => {
      let arr = []
      for (let i = 0;data.length > i;i++){
        if(data[i] > 0){
          arr.push(data[i]);
        }
      }
      return arr.join(',');
    }
    const getDeparlist = () => {
      _this.$request({
        url: "?s=Learn.Department.treeList",
        params: {pageSize:100}
      }).then(res=>{
        state.selectData   = res.data.list
        state.department = res.data.data
        let str = res.data.list_key.substr(0, res.data.list_key.length - 1);
        state.formObj.department = str
        state.list_key = str.split(',')

      })
  }
    onMounted(()=>{
      //获取部门
      getDeparlist()
    });
    // const jurisdiction = ref('');
    return{
      state,
      cancel,
      submitForm,
      getDeparlist

    }
  }
}
</script>
<style lang="scss" scoped>

.home {
  display: flex;
  width: 100%;
  // height:  calc(calc(100vh - 64px) - 40px - 70px);
   .left {
      flex: 2;
      background-color: #fff;
      height: 100%;
      margin-right: 24px;
      .title {
        display: flex;
        border-bottom: 1px solid #E9E9E9;
        box-sizing: border-box;
        align-items: center;
        height: 55px;
          .active{
            // border-bottom: 2px solid #1890FFFF;
            color: #1890FFFF !important;
            position: relative;
          }
          .active:after{
            content:'';
            position: absolute;
            bottom: -102%;
            left: 0%;
            height: 2px;
            width: 50px;
            background-color: #1890FFFF;
          }
          .titleItem {
            margin-left: 32px;
            font-size: 16px;
            font-weight: 600;
            color: #888888FF;
            cursor: pointer;
          }
      }

      .content{
        margin-top: 22px;
        display: grid;
        place-items: center;
      }

   }
}
</style>
